<script setup>
  import { showToast } from '@jdt-jinke/jdtm';

  import { ref } from 'vue';
  import { get } from 'lodash-es';
  const object = { a: [{ b: { c: '通过lodash获取值' } }] };
  const lodashValue = ref(get(object, 'a[0].b.c'));

  const clickBut = () => {
    showToast('@jdt-jinke/jdtm Toast提示');
  };
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
  </div>
  <div>{{ lodashValue }}</div>
  <div>
    <jdtm-button type="primary" size="large" @click="clickBut"
      >大号按钮</jdtm-button
    >
  </div>
</template>

<style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
</style>
